<template>
  <div class="card p-4 mb-5" :class="`has-background-${bgColor}-dark`">
    <label class="label has-text-white">{{ label }}</label>
    <div class="field">
      <div class="control">
        <textarea
          v-model="modelValue"
          @input="inputModelValue"
          ref="textareaRef"
          class="textarea"
          v-autofocus
          maxlength="101"
          :placeholder="placeholder"
        />
      </div>
    </div>

    <div class="field is-grouped is-grouped-right">
      <div class="control">
        <slot name="buttons" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { vAutofocus } from '@/directives/vAutofocus';

const props = defineProps({
  modelValue: {
    type: String,
    required: true,
  },
  bgColor: {
    type: String,
    default: 'success',
  },
  placeholder: {
    type: String,
    default: 'Add a new note',
  },
  label: {
    type: String,
    default: 'Edit note',
  },
});

const emit = defineEmits(['update:modelValue']);

const textareaRef = ref<HTMLTextAreaElement | null>(null);

const inputModelValue = () => {
  emit('update:modelValue', props.modelValue);
};
const focusTextarea = () => {
  textareaRef?.value?.focus();
};

defineExpose({
  focusTextarea,
});
</script>
